<template>
  <el-drawer
    @close="close"
    :visible.sync="dialogVisible"
    :title="title"
    :size="500"
  >
    <el-row :gutter="10" class="box-card">
      <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="80px">
        <el-col :span="24">
          <el-form-item label="用户名" prop="account">
            <el-input v-model="formData.account" placeholder="请输入用户名" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name" placeholder="请输入姓名" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="电话" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入电话" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="密码" prop="password" v-if="!isEdit">
            <el-input v-model="formData.password" show-password placeholder="请输入密码" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="确认密码" prop="confirmPassword" v-if="!isEdit">
            <el-input v-model="formData.confirmPassword" show-password placeholder="请确认密码" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="角色" prop="roleId">
            <el-select v-model="formData.roleId" placeholder="请选择角色" :style="{width: '100%'}">
              <el-option
              v-for="(item, index) in roleIdOptions"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属社区" prop="departmentId">
            <el-select v-model="formData.departmentId" placeholder="请选择社区" :style="{width: '100%'}">
              <el-option
              v-for="(item, index) in departmentIdOptions"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="formData.status" size="medium">
                <el-radio v-for="(item, index) in statusOptions" :key="index" :label="item.value"
                >{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        <el-col :span="24">
          <el-form-item label="备注说明" prop="remarks">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入备注"
              v-model="formData.remarks"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="handelConfirm">确定</el-button>
    </div>
  </el-drawer>
</template>
<script>
import { postUsers, getUser } from '@/api/users'
import { queryList } from '@/api/dept'
import { queryRoleList } from '@/api/roles'
export default {
  props: [],
  data () {
    return {
      dialogVisible: false,
      formData: {
        account: '', // 用户名
        name: '', // 姓名
        phone: '', // 电话
        password: '', // 密码
        confirmPassword: '', // 确认密码
        roleId: '', // 角色
        departmentId: '',
        status: '1',
        isDy: false,
        remarks: '' // 备注
      },
      rules: {
        account: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }],
        phone: [
          {
            required: true,
            message: '请输入电话',
            trigger: 'blur'
          },
          { pattern: /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/, message: '电话格式不正确', trigger: 'blur' }
        ],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }],
        confirmPassword: [{
          required: true,
          message: '请确认密码',
          trigger: 'blur'
        }],
        roleId: [{
          required: true,
          message: '请选择社区',
          trigger: 'blur'
        }],
        departmentId: [{
          required: true,
          message: '请选择社区',
          trigger: 'blur'
        }]
      },
      statusOptions: [{
        label: '激活',
        value: '1'
      }, {
        label: '禁用',
        value: '0'
      }],
      departmentIdOptions: [],
      roleIdOptions: [],
      title: '新增用户',
      id: null,
      isEdit: false
    }
  },
  mounted () {
    this.getDeptAndRole()
  },
  methods: {
    /**
     *
     * @param {*} isEdit 是否编辑
     * @param {*} data 编辑时需要的数据
     */
    async isShow (isEdit = false, data) {
      this.dialogVisible = true
      this.title = isEdit ? '编辑用户' : '新增用户'
      this.isEdit = isEdit
      if (isEdit) {
        const userInfo = await getUser({ id: data.id })
        const formData = this.formData
        for (const key in formData) {
          formData[key] = userInfo[key]
        }
        formData.status = userInfo.status ? '1' : '0'
        this.id = data.id
      }
    },
    // 获取部门和角色
    getDeptAndRole () {
      queryList().then(res => {
        this.departmentIdOptions = res
      })
      queryRoleList().then(res => {
        this.roleIdOptions = res
      })
    },
    close () {
      this.$refs.elForm.resetFields()
      this.dialogVisible = false
    },
    handelConfirm () {
      this.$refs.elForm.validate(async valid => {
        if (!valid) return
        this.isEdit ? (await postUsers({ ...this.formData, id: this.id, clientCode: 1, type: 1 })) : (await postUsers({ ...this.formData, type: 1 }))
        this.$notify.success({
          title: `完成${this.title}`
        })
        this.$emit('update:visible')
        this.close()
      })
    }
  }
}

</script>
<style lang="scss" scoped>
.box-card {
  margin-bottom: 10px;
  padding-right: 20px;
  width: 100%;
  padding-left: 10px;
}
.footer {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40px;
  padding-left: 90px;
  padding-right: 20px;
  .el-button {
    width: 100%;
  }
}
</style>
